<template>
  <div class="header">
    <div class="heLeft">
      <div class="logo">节鱼后台管理</div>
      <div class="collapse-btn" @click="collapseChage">
        <i v-if="!collapse" class="el-icon-s-fold"></i>
        <i v-else class="el-icon-s-unfold"></i>
      </div>
      <div>
        <i class="el-icon-s-home" @click="homeClick()"></i>
      </div>
    </div>

    <div class="heRight">
      <div class="user-avator">
        <img :src="user.userUrl" />
      </div>
      <!-- 用户名下拉菜单 -->
      <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{user.username}}
                        <i class="el-icon-caret-bottom"></i>
                    </span>
        <template #dropdown>
          <el-dropdown-menu>
<!--            <a href="h#" target="_blank">-->
<!--              <el-dropdown-item>项目仓库</el-dropdown-item>-->
<!--            </a>-->
            <el-dropdown-item command="1">前台</el-dropdown-item>
            <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return{
      user:{}
    }
  },
  created() {
    this.getUser()
  },
  methods:{
    // 用户名下拉菜单选择事件
    handleCommand(command) {
      // if (command == "loginout") {
      //   // localStorage.removeItem("ms_username");
      //   window.sessionStorage.clear();//清除session
      //   this.$router.push("/login");
      // }
      if (!command) {
        this.$message("菜单选项缺少command属性");
        return;
      }
      switch (command) {
        case "1":
          this.$router.push('../front/Home')
          break
        case "loginout":
          // localStorage.removeItem("ms_username");
          window.sessionStorage.clear();//清除session
          this.$router.push("/login");
          break
      }
    },
    getUser() {
      let user = JSON.parse(window.sessionStorage.getItem('user') || null)
      if (user){
        this.user = user
      }
    },
    homeClick(){
      this.$router.push("/welcome");
      let actionPath = "/welcome"
      window.sessionStorage.setItem('actionPath', JSON.stringify(actionPath)) //路径存放
    },
    collapseChage() {
      this.$store.commit("hadndleCollapse", !this.collapse);
    }
  },
  computed: {
    collapse() {
      return this.$store.state.collapse;
    }
  },
  mounted() {

  }
};
</script>

<style lang="less" scoped>
.header{
  height: 70px;
  font-size: 22px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  //position: relative;
  .heLeft{
    display: flex;
    align-items: center;
    .logo{
      width: 170px;
      text-align: center;
    }
    .collapse-btn {
      float: left;
      padding: 0 21px;
      cursor: pointer;
      line-height: 70px;
    }
  }
  .heRight{
    display: flex;
    align-items: center;
    .user-avator {
      margin-right: 20px;
      img {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
  }
}

.el-dropdown-link {
  color: #fff;
  cursor: pointer;
}
.el-dropdown-menu__item {
  text-align: center;
}
</style>
